import React from "react";
import _ from "lodash";
import { toJS } from "mobx";
import { Icon, Row, Col } from "antd";
import Select, { Option } from "rc-select";
import { joinTypes } from "../../../../constants";
import "./RelatedCard.less";
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

const { INNER, OUTER, RIGHT, LEFT } = joinTypes;

export default class RelatedCard extends React.Component {
    constructor(props) {
        super();

        this.state = {
            relatedFields: toJS(props.node.relatedFields),
            joinType: props.node.joinType
        };
    }

    componentWillReceiveProps(nextProps) {
        if ('node' in nextProps) {
            const relatedFields = toJS(nextProps.node.relatedFields);

            if (!_.isEqual(relatedFields, this.state.relatedFields)) {
                this.setState({
                    relatedFields
                });
            }
        }
    }

    getRels() {
        const { node } = this.props;
        const rels = [
            { type: INNER, text: getLabel('502694','内部'), disabled: false },
            { type: LEFT, text: getLabel('502695','左侧'), disabled: false },
            { type: RIGHT, text: getLabel('502696','右侧'), disabled: false },
            { type: OUTER, text: getLabel('502697','完全外部'), disabled: true },
        ];

        return rels.map(({ type, text, disabled }) => (
            <div
                key={type}
                onClick={() => !disabled && this.onJoinTypeChange(type)}
                className={`edc-ds-rel ${node.joinType === type ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}
            >
                <div>
                    <div className={`img img-${type.toLowerCase()}`}></div>
                    <div className='txt'>{text}</div>
                </div>
            </div>
        ));
    }

    getField(field, index) {
        const { relatedFields } = this.state;
        const { node } = this.props;
        const len = relatedFields.length;
        const pfields = toJS(node.parentNode.fields) || [];
        const fields = toJS(node.fields) || [];
        const selectProps = {
            showArrow: true,
            transitionName: 'slide-up',
            choiceTransitionName: 'zoom',
            prefixCls: 'ant-select',
            optionLabelProp: 'children',
            getPopupContainer: node => $(node).parents('.edc-ds-join-card')[0]
        };

        return (
            <Row gutter={16} key={index}>
                <Col span={10}>
                    <Select {...selectProps} showSearch  value={field[0]} onChange={(v, l) => this.onFieldChange(v, index, 0)}>
                        {pfields.map((f, i) => <Option key={i} value={f.name}>{f.text || f.name}</Option>)}
                    </Select>
                </Col>
                <Col span={2}>=</Col>
                <Col span={10}>
                    <Select {...selectProps} showSearch value={field[1]} onChange={(v, l) => this.onFieldChange(v, index, 1)}>
                        {fields.map((f, i) => <Option key={i} value={f.name}>{f.text || f.name}</Option>)}
                    </Select>
                </Col>
                <Col span={2}>
                    {(index > 0 || len > 1) && <Icon onClick={() => this.onFieldRemove(index)} type='delete' />}
                </Col>
            </Row>
        );
    }

    onFieldChange(value, index, fIndex, opt) {
        const { relatedFields } = this.state;
        const field = relatedFields[index] || [];

        field[fIndex] = value;
        relatedFields[index] = field;

        this.onRelatedFieldsChange(relatedFields);
    }

    onFieldAdd() {
        const { relatedFields } = this.state;

        relatedFields.push([]);

        this.onRelatedFieldsChange(relatedFields);
    }

    onFieldRemove(index) {
        const { relatedFields } = this.state;

        relatedFields.splice(index, 1);

        this.onRelatedFieldsChange(relatedFields);
    }

    onRelatedFieldsChange(relatedFields) {
        const { node } = this.props;

        this.setState({ relatedFields });
        this.props.onRelatedFieldsChange(node.name, relatedFields);
    }

    onJoinTypeChange(joinType) {
        const { node } = this.props;

        this.setState({ joinType });
        this.props.onJoinTypeChange(node.name, joinType);
    }

    render() {
        const { relatedFields } = this.state;
        const { node } = this.props;
        const { text, name, parentNode } = node;
        return (
            <div className='edc-ds-join-card' ref={card => this.card = card} style={{ position: 'relative' }} onClick={e => e.stopPropagation()}>
                <div className='edc-ds-rels'>
                    {this.getRels()}
                </div>
                <div className='edc-ds-table-name'>
                    <div className='edc-ellipsis'>{parentNode.text || parentNode.name}</div>
                    <div className='edc-ellipsis'>{text || name}</div>
                </div>
                <div className='edc-ds-rel-fields'>
                    <div>
                        {relatedFields.map((f, i) => this.getField(f, i))}
                    </div>
                    <div className='opt'>
                        <div onClick={this.onFieldAdd.bind(this)}><Icon type='plus' />{getLabel('502698','添加')}</div>
                        <div onClick={() => this.onRelatedFieldsChange([[]])}>{getLabel('502699','全部清除')}</div>
                    </div>
                </div>
            </div>
        );
    }
}